@charset "utf8";
header{
	/* 页面固定宽度：占满页宽 */
	width: 100%;
	height: 43px;
	background: #333333;
}
/* 中控区设定宽高 */
header div#wrapper{
	width: 1105px;
	height: 43px;
	/* background: #fff; */
	/* 居中 */
	margin: 0 auto;
}
/* 中控左区 */
header div#wrapper div.head_left{
	width: 650px;
	height: 43px;
	/* background: #ffaa00; */
	float: left;
}
/* 中控右区 */
header div#wrapper div.head_right{
	width: 220px;
	height: 43px;
	/* background: #0055ff; */
	float: right;
}
/* 头导航的li的浮动和居中 （左右控区都包含）*/
header div#wrapper div ul li {
	float: left;
	line-height: 43px;
}
/* 头导航的文字的大小和边距 （左右控区都包含）*/
header div#wrapper div ul li a{
	border-right: 1px solid #424242;
	font-size: 14px;
	padding: 0 10px;
}
/* 去除多余的竖线 */
header div#wrapper div ul li a.c{
	border: 0;
}
/* 头导航的文字颜色变化（左右控区都包含） */
header div#wrapper div ul li a:hover{
	color: #fff;
}
/* 购物车区域 */
header div#wrapper div.head_right div.shop{
	width: 110px;
	height: 43px;
	background-color: #424242;
	float: right;
}
/* 购物区的背景颜色变化 */
header div#wrapper div.head_right div.shop:hover{
	background-color: #fff;
}
/* 购物车的名字居中 */
header div#wrapper div.head_right div.shop div.buy0{
    text-align: center;
	line-height: 43px;
}
/* 购物车字的颜色变化 */
header div#wrapper div.head_right div.shop div.buy0:hover{
	color: #ff5500;
}
/* 购物车.icon */
header div#wrapper div.head_right div.shop div.buy0 i.car{
	padding: 0 10px;
	/* url（路径：相对路径） */
	background: url(../img/buy.png) no-repeat;
	position: relative;
	top: 3px;
}
/* 难题：鼠标移动购物车上，文本+图片+背景色同时改变
 思路：派生选择器+伪类选择器【伪类不是在最后】
    可以在加背景色的同时加颜色加背景图
解读：给购物车区域加背景色，同时给a加文字颜色，以及加背景图
 */
header div#wrapper div.head_right div.shop div.buy0:hover i.car{
	background: url(../img/buy01.png) no-repeat;
	position: relative;
	top: 3px;
}
/* 隐藏购物车中没内容的文字 */
header div#wrapper div.head_right div.buy1{
	/* border: 1px solid red; */
	width: 220px;
	height: 90px;
	position: absolute;
	top: 43px;
	text-align: center;
	line-height: 90px;
	background: #ffffff;
	color: #333333;
	font-size: 14px;
	display: none;
	z-index: 2;
	filter: drop-shadow(0 0 5px #8c8c8c);
}